<template>
  <div class="student">
    <h2>我是Student组件</h2>
    <ul>
      <li>学生姓名：{{name}}</li>
      <li>学生年龄：{{age}}</li>
    </ul>
    <h3>我收到的数据</h3>
    <button @click="qian2++">孩子赚钱了（一块一块的赚）</button><br><br>
    <button @click="che.name='奔驰'">孩子出去吹牛了，说车名是奔驰</button><br><br>
    <!-- 彻底换掉che对象  因此会警告 -->
    <button @click="che = {name:'保时捷',price :200000,age:2}">孩子真正有钱了，彻底换掉了这台车（会报错）</button><br><br>
    <button @click="che.age +=1">车龄+1年</button>
    <ul>
      <li>消息：{{xiaoxi}}</li>
      <li>钱：{{qian2}}</li>
      <li>车名：{{che.name}}</li>
      <li>车价：{{che.price}}</li>
      <li>车龄：{{che.age}}</li>
    </ul>
  </div>

</template>

<script>
export default {
  name: 'Student',
  //第一种声明接收props的方式（只接收）
//   props: ['xiaoxi', 'qian', 'che'], //声明接收数据接收到的数据全部放在vc上
  //第二种接收Props的方式
//   props:{
//       xiaoxi:String,//声明接收xiaoxi并且对xiaoxi的类型进行限制，只能传递字符串
//       qian:Number,//声明接收 qian并且对 qian的类型进行限制，只能传递数字
//       che:Object,//声明接收 che并且对 che的类型进行限制，只能传递对象
//   },
//第三种声明接收props的方式
props:{
    xiaoxi:{
        type:String,
        default:'我买了一台车',
        required:true
    },
     qian:{
        type:Number,
        default:'10000000',
        required:true
    },
che:{
        type:Object,
        default(){
            return {name:'雅迪',price :3200,age:1}//注意当配置的默认值是{}或[]的时候，必须把default写成函数，（类似于data要写成函数）
        },
        required:true
    },


},
  data() {
    console.log(this)
    return {
      name: '佩奇',
      age: 18,
      qian2: this.qian,
    }
  },
}
</script>

<style scoped>
.student {
  background-color: pink;
  padding: 20px;
}
</style>